<template>
    <el-card>
        <div slot="header">
            <el-input
                    placeholder="搜索 ID / 用户名 / 邮箱 / 手机"
                    prefix-icon="el-icon-search"
                    v-model="search"
                    clearable
                    style="width: 240px">
            </el-input>
            <el-button @click="open()" type="primary">新建账号</el-button>
        </div>
        <el-table :data="user"
                  :v-loading="loading"
                  @filter-change="userLevelFilter"
                  @row-click="open">
            <el-table-column label="ID" width="60">
                <template slot-scope="scope">
                    <span v-text="scope.row.id"></span>
                </template>
            </el-table-column>
            <el-table-column
                    label="用户级别"
                    prop="level.name"
                    column-key="level"
                    :filters="level"/>
            <el-table-column label="用户名" prop="username"/>
            <el-table-column label="邮箱" prop="email"/>
            <el-table-column label="手机" prop="phone"/>
            <el-table-column label="注册时间" prop="created_at"/>
        </el-table>
        <el-pagination
                background
                layout="prev, pager, next"
                :page-size="$store.state.pageSize"
                :current-page.sync="page"
                @current-change="fetch"
                :total="total">
        </el-pagination>
    </el-card>
</template>

<script>
    import _ from 'lodash';

    export default {
        data() {
            return {
                total: 0,
                page: 1,
                loading: true,
                level: [],
                user: [],
                search: '',
            };
        },
        methods: {
            fetch(data) {
                this.loading = true;
                const params = {page: this.page};
                if (data && data.level)
                    params.level = data.level.join(',');
                if (!_.isEmpty(this.search))
                    params.search = this.search;
                this.$http.get('/api/user', {params}).then(res => {
                    res.data.list.forEach(user => {
                        user.created_at = moment(user.created_at).calendar();
                    });
                    this.user = res.data.list;
                    this.total = res.data.total;
                    this.loading = false;
                });
            },
            userLevelFilter(value) {
                this.fetch(value);
            },
            open(row) {
                if (row && row.id > 0)
                    this.$router.push('/user/' + row.id + '/edit');
                else
                    this.$router.push('/user/create');
            },
        },
        watch: {
            search: _.debounce(function () {
                this.fetch();
            }, 500),
        },
        mounted() {
            this.fetch();
            this.$http.get('/api/user_level').then(res => {
                this.level = res.data.map(level => {
                    return {text: level.name, value: level.id};
                });
            });
        }
    }
</script>

<style scoped>

</style>